<template>
    <el-form :model="cForm" :inline="true" class="demo-form-inline" :disabled="!isShowAttrList">
        <el-form-item label="一级分类">
            <el-select value placeholder="请选择" v-model="cForm.category1Id" @change="getCategory2">
                <el-option :label="c1.name" :value="c1.id" v-for="c1 in category1List" :key="c1.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
            <el-select value placeholder="请选择" v-model="cForm.category2Id" @change="getCategory3">
                <el-option :label="c2.name" :value="c2.id" v-for="c2 in category2List" :key="c2.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
            <el-select
                value
                placeholder="请选择"
                v-model="cForm.category3Id"
                @change="getCategoryList"
            >
                <el-option :label="c3.name" :value="c3.id" v-for="c3 in category3List" :key="c3.id"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    name: 'SelecterCategory',
    props: ["isShowAttrList"],
    data() {
        return {
            /* 获取服务器返回的数据 */
            category1List: [],
            category2List: [],
            category3List: [],
            /* 我们需要收集的数据 */
            cForm: {
                category1Id: "",
                category2Id: "",
                category3Id: ""
            }
        }
    },
    /* 发送ajax,获取一级商品分类 */
    mounted() {
        this.getCategory1();
    },
    /* method */
    methods: {
        /* 获取一级商品分类 */
        async getCategory1() {
            const result = await this.$API.category.getCategory1()
            if (result.code === 200 || result.code === 20000) {
                this.category1List = result.data
            }
        },
        /* 发送ajax,获取二级商品分类的数据 */
        async getCategory2(value) {
            /* 清空二级与三级的id与数据 */
            this.cForm.category2Id = ""
            this.cForm.category3Id = ""
            this.category2List = []
            this.category3List = []

            /* 自定义事件 */
            this.$emit("CategoryInfo", { categoryid: value, level: 1 })

            const result = await this.$API.category.getCategory2(value)
            if (result.code === 200 || result.code === 20000) {
                this.category2List = result.data
            }
        },
        /* 发送ajax,获取三级商品分类的数据 */
        async getCategory3(value) {
            /* 清空三级分类的id与数据 */
            this.cForm.category3Id = ""
            this.category3List = []

            /* 自定义事件 */
            this.$emit("CategoryInfo", { categoryid: value, level: 2 })

            const result = await this.$API.category.getCategory3(value)
            if (result.code === 200 || result.code === 20000) {
                this.category3List = result.data
            }
        },
        /* 改变第三级分类的下拉框 */
        getCategoryList(value) {
            /* 自定义事件 */
            this.$emit("CategoryInfo", { categoryid: value, level: 3 })
        }
    },
};
</script>

<style lang='scss' scoped>
</style>